<template>
    <div>
        <!-- 输入手机号，调起手机号键盘 -->
        <van-field v-model="phone" required label="手机号" placeholder="请输入手机号" error-message="手机号格式错误" />
        <van-cell-group inset>
            <van-field v-model="captcha" center clearable label="短信验证码" placeholder="请输入短信验证码">
                <template #button>
                    <van-button size="small" type="primary" @click="sentcode">发送验证码</van-button>
                </template>
            </van-field>
        </van-cell-group>
        <van-button plain type="primary">取消</van-button>
        <van-button type="primary" @click="gologin">登录</van-button>
    </div>

</template>

<script setup >

import { onMounted, ref } from 'vue';
import { login, verifycaptcha, getcaptcha } from '../../api/login';

let phone = ref('')

let captcha = ref('')

onMounted(() => {
})
const sentcode = async () => {
    let data = await getcaptcha(phone.value)
    console.log('getcode', data)
}
const gologin = async () => {
    var getTimestamp = new Date().getTime();
    let data = await verifycaptcha(phone.value, captcha.value)
    console.log('cap', data)
    if (data.data == true) {
        let data1 = await login(phone.value, captcha.value, getTimestamp)
        localStorage.setItem('cookie', res.cookie)
        localStorage.setItem('token', res.token)
        console.log("登录成功", data1)
    } else {
        console.log('验证码错误')
    }
}
</script>

<style scoped >
.card {

    border-radius: 10px;
    border: 1px solid #e4e7ed;
    height: 70px;
    background-color: white;
    margin-top: 100px;
    width: 75%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.headimg {
    position: absolute;
    top: -40%;
    z-index: 999;
    left: 50%;
    transform: translateX(-50%);
}
</style>